<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">用户登录</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" style="width:100%;" @click="login()">登录</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary" @click="ForgotPassword">忘记密码</el-link>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      ForgotPassword(){
        this.$router.push("/ForgotPassword").catch(err => {
    if (err.name !== "NavigationDuplicated") {
      throw err;
    }
  });
      },
          login() {
            this.$message({
              message: "登陆成功",
              type: 'success'
            });
      this.$router.push("/first").catch(err => {
    if (err.name !== "NavigationDuplicated") {
      throw err;
    }
  });
    },
      gotoRegister() {
        this.$router.push("/Register");
      }
    }
  }
</script>
 
<style scoped>

/* 确保 .login-wrap 占满整个可视区域，并去除内外边距 */
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 720px; /* 将高度设置为100%以适应整个视口 */
  padding-top: 12%;
  background-image: url('~@/assets/sws.png');
  background-color: #3b7cf5;
  background-size: cover;
  background-position: center right;
}
 
  .login-container {
   border-radius: 10px;
   margin: 0px auto;
   width: 350px;
   padding: 30px 35px 15px 35px;
   border: 1px solid #eaeaea;
   text-align: left;
   background-color: rgba(229, 229, 229, 0.8);
  }
 
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #0b0b0b;
  }
</style>